<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品预览 - 橙黄商城</title>
    <style>
        :root {
            --primary-color: #FF8C00;
            --secondary-color: #FFA500;
            --light-color: #FFD700;
            --dark-color: #FF4500;
            --text-color: #333;
            --light-text: #666;
            --border-color: #e0e0e0;
            --bg-color: #FFF8F0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 30px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--dark-color);
        }
        
        .nav a {
            margin-left: 20px;
            text-decoration: none;
            color: var(--text-color);
            transition: color 0.3s;
        }
        
        .nav a:hover {
            color: var(--primary-color);
        }
        
        .product-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .product-card {
            width: calc(25% - 15px);
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(255,140,0,0.2);
        }
        
        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .product-info {
            padding: 15px;
        }
        
        .product-title {
            font-size: 16px;
            margin-bottom: 8px;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .product-price {
            font-size: 18px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .product-original-price {
            font-size: 14px;
            color: var(--light-text);
            text-decoration: line-through;
            margin-left: 8px;
        }
        
        .product-rating {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .stars {
            color: var(--light-color);
            margin-right: 8px;
        }
        
        .rating-count {
            font-size: 12px;
            color: var(--light-text);
        }
        
        .product-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }
        
        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--dark-color);
        }
        
        .btn-secondary {
            background-color: white;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }
        
        .btn-secondary:hover {
            background-color: #FFF0E0;
        }
        
        .badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: var(--dark-color);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .product-image-container {
            position: relative;
        }
        
        .footer {
            margin-top: 50px;
            padding: 20px 0;
            text-align: center;
            color: var(--light-text);
            border-top: 1px solid var(--border-color);
        }
        
        @media (max-width: 992px) {
            .product-card {
                width: calc(33.33% - 15px);
            }
        }
        
        @media (max-width: 768px) {
            .product-card {
                width: calc(50% - 10px);
            }
        }
        
        @media (max-width: 480px) {
            .product-card {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">橙黄商城</div>
            <div class="nav">
                <a href="#">首页</a>
                <a href="#">分类</a>
                <a href="#">购物车</a>
                <a href="#">我的账户</a>
            </div>
        </div>
        
        <div class="product-container">
            <!-- 商品卡片1 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://via.placeholder.com/300x200/FFD700/FFFFFF?text=商品1" alt="商品1" class="product-image">
                    <div class="badge">热销</div>
                </div>
                <div class="product-info">
                    <h3 class="product-title">优质橙黄色T恤 夏季新款</h3>
                    <div class="product-price">
                        ¥99.00
                        <span class="product-original-price">¥129.00</span>
                    </div>
                    <div class="product-rating">
                        <div class="stars">★★★★☆</div>
                        <span class="rating-count">(128)</span>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-secondary">加入收藏</button>
                        <button class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片2 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://via.placeholder.com/300x200/FFA500/FFFFFF?text=商品2" alt="商品2" class="product-image">
                    <div class="badge">新品</div>
                </div>
                <div class="product-info">
                    <h3 class="product-title">橙黄色运动鞋 轻便舒适</h3>
                    <div class="product-price">
                        ¥299.00
                        <span class="product-original-price">¥399.00</span>
                    </div>
                    <div class="product-rating">
                        <div class="stars">★★★★★</div>
                        <span class="rating-count">(256)</span>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-secondary">加入收藏</button>
                        <button class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片3 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://via.placeholder.com/300x200/FF8C00/FFFFFF?text=商品3" alt="商品3" class="product-image">
                    <div class="badge">特惠</div>
                </div>
                <div class="product-info">
                    <h3 class="product-title">橙黄色背包 大容量多功能</h3>
                    <div class="product-price">
                        ¥159.00
                        <span class="product-original-price">¥199.00</span>
                    </div>
                    <div class="product-rating">
                        <div class="stars">★★★★☆</div>
                        <span class="rating-count">(87)</span>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-secondary">加入收藏</button>
                        <button class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片4 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://via.placeholder.com/300x200/FF4500/FFFFFF?text=商品4" alt="商品4" class="product-image">
                </div>
                <div class="product-info">
                    <h3 class="product-title">橙黄色太阳镜 防紫外线</h3>
                    <div class="product-price">
                        ¥129.00
                    </div>
                    <div class="product-rating">
                        <div class="stars">★★★☆☆</div>
                        <span class="rating-count">(42)</span>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-secondary">加入收藏</button>
                        <button class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片5 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://via.placeholder.com/300x200/FFD700/FFFFFF?text=商品5" alt="商品5" class="product-image">
                    <div class="badge">限时</div>
                </div>
                <div class="product-info">
                    <h3 class="product-title">橙黄色手表 时尚潮流</h3>
                    <div class="product-price">
                        ¥199.00
                        <span class="product-original-price">¥259.00</span>
                    </div>
                    <div class="product-rating">
                        <div class="stars">★★★★★</div>
                        <span class="rating-count">(156)</span>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-secondary">加入收藏</button>
                        <button class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片6 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://via.placeholder.com/300x200/FFA500/FFFFFF?text=商品6" alt="商品6" class="product-image">
                </div>
                <div class="product-info">
                    <h3 class="product-title">橙黄色水杯 保温保冷</h3>
                    <div class="product-price">
                        ¥79.00
                    </div>
                    <div class="product-rating">
                        <div class="stars">★★★★☆</div>
                        <span class="rating-count">(63)</span>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-secondary">加入收藏</button>
                        <button class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片7 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://via.placeholder.com/300x200/FF8C00/FFFFFF?text=商品7" alt="商品7" class="product-image">
                    <div class="badge">推荐</div>
                </div>
                <div class="product-info">
                    <h3 class="product-title">橙黄色帽子 防晒透气</h3>
                    <div class="product-price">
                        ¥59.00
                        <span class="product-original-price">¥89.00</span>
                    </div>
                    <div class="product-rating">
                        <div class="stars">★★★★☆</div>
                        <span class="rating-count">(94)</span>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-secondary">加入收藏</button>
                        <button class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片8 -->
            <div class="product-card">
                <div class="product-image-container">
                    <img src="https://via.placeholder.com/300x200/FF4500/FFFFFF?text=商品8" alt="商品8" class="product-image">
                </div>
                <div class="product-info">
                    <h3 class="product-title">橙黄色手机壳 防摔保护</h3>
                    <div class="product-price">
                        ¥39.00
                    </div>
                    <div class="product-rating">
                        <div class="stars">★★★☆☆</div>
                        <span class="rating-count">(28)</span>
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-secondary">加入收藏</button>
                        <button class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2023 橙黄商城 版权所有</p>
            <p>客服电话：400-123-4567</p>
        </div>
    </div>
</body>
</html>